<template>
	<view class="content" v-if="loaded">
		<qiun-title-bar title="7日新增用户" />
		<view class="charts-box">
			<!--
      datacom组件读取uniClinetDB示例
      数据规范：
      带有categories类型的图表定义如下
      group：为series分组的name
      text：为对应categories的字段
      value：为series的分组data的值
      获取后组件会自动处理categories和series数据，无需手动拼接处理
      注意事项：
      1、如已传入chartData的categories，则优先使用chartData的categories
      2、如返回数据中无分组字段group，否则图例会显示"默认分组"，如下
      chartData={categories:["a","b","c"],series:[{name:"默认分组",data:[0,1,2]}]}
      3、如果text在数据库中定义为enum类型，则需要传入textEnum来描述正确的text值
      4、如果group在数据库中定义为enum类型，则需要传入groupEnum来描述正确的group值
      -->
			<qiun-data-charts class="charts-box" type="line"
				:opts="{xAxis:{disableGrid:true},yAxis:{format:''},extra:{line:{type: 'curve'}}}"
				collection="uni-id-users" field="register_date"
				:where="'register_date >= ' + new Date(start7Date).getTime() + ' && register_date <= ' + Date.now()"
				groupby="dateToString(add(new Date(0),register_date),'%Y-%m-%d','+0800') as text"
				group-field="count(*) as value" :startDate="start7Date" :endDate="endDate" />
		</view>
		<qiun-title-bar title="7日新增订单量" />
		<view class="charts-box">
			<qiun-data-charts class="charts-box" type="line"
				:opts="{xAxis:{disableGrid:true},yAxis:{format:''},extra:{line:{type: 'curve'}}}"
				collection="tian-mall-orders" field="create_time"
				:where="'state>0 &&create_time >= ' + new Date(start7Date).getTime() + ' && create_time <= ' + Date.now()"
				groupby="dateToString(add(new Date(0),create_time),'%Y-%m-%d','+0800') as text"
				group-field="count(*) as value" :startDate="start7Date" :endDate="endDate" />
		</view>
		<qiun-title-bar title="7日下单总金额" />
		<view class="charts-box">
			<qiun-data-charts class="charts-box" type="line"
				:opts="{xAxis:{disableGrid:true},yAxis:{format:''},extra:{line:{type: 'curve'}}}"
				collection="tian-mall-orders" field="create_time,divide(goods_total_fee,100) as goods_total"
				:where="'state>0 && create_time >= ' + new Date(start7Date).getTime() + ' && create_time <= ' + Date.now()"
				groupby="dateToString(add(new Date(0),create_time),'%Y-%m-%d','+0800') as text"
				group-field="sum(goods_total) as value" :startDate="start7Date" :endDate="endDate" />
		</view>
		<qiun-title-bar title="7日积分总计" />
		<view class="charts-box">
			<qiun-data-charts class="charts-box" type="line"
				:opts="{xAxis:{disableGrid:true},yAxis:{format:''},extra:{line:{type: 'curve'}}}"
				collection="uni-id-score-day-statistics" field="day,value"
				:where="'day >= ' + new Date(start7Date).getTime() + ' && day <= ' + Date.now()"
				groupby="dateToString(add(new Date(0),day),'%Y-%m-%d','+0800') as text"
				group-field="sum(value) as value" :startDate="start7Date" :endDate="endDate" />
		</view>
		<!-- <qiun-title-bar title="近一个月商品日销量" />
		<view class="charts-box">
			<qiun-data-charts class="charts-box" type="column"
				:opts="{xAxis:{disableGrid:true},yAxis:{format:''},extra:{line:{type: 'curve'}}}"
				collection="cloud_goods_day_sales" field="day as text,total as value" :where="goodsSaleWhere" :pageSize="50"
				:startDate="start30DateStr" :endDate="endDate" />
		</view> -->


		<view class="charts-box">
			<!--
      饼图类数据规范：
      value：代表具体数值
      text：代表value的描述
      注意事项：
      1、如果text在数据库中定义为enum类型，则需要传入textEnum来描述正确的text值
      -->
			<!-- 			<qiun-data-charts class="charts-box" type="pie" collection="opendb-news-articles"
				field="publish_date,article_status"
				:where="'publish_date >= ' + new Date(startDate).getTime() + ' && publish_date <= ' + new Date(endDate).getTime()"
				groupby="article_status as text" group-field="count(*) as value"
				:textEnum="[{value: 0,text: '草稿箱'},{value: 1,text: '已发布'}]" /> -->
		</view>
	</view>
</template>

<script>
	//下面是uCharts的配置文件及qiun-data-charts组件的公用中转参数，可以从本配置文件中获取uCharts实例、opts配置、format配置（APP端因采用renderjs无法从此配置文件获取uCharts实例）
	import uCharts from '@/uni_modules/qiun-data-charts/js_sdk/u-charts/config-ucharts.js';

	export default {
		data() {
			return {
				startDate: '2021-03-01',
				start7Date: "",
				endDate: "",
				endDateStr: "",
				start30DateStr: "",
				goodsSaleWhere: "",
				loaded: false,
			};
		},
		onLoad() {
			this.endDate = this.$formatDate(new Date(), "yyyy-MM-dd")
			this.start7Date = this.$formatDate(Date.now() - 3600 * 24 * 6 * 1000, "yyyy-MM-dd")
			console.log("this.endDate", this.endDate, this.start7Date)

			// let endDateStr = this.$util.date("Y-m-d")
			// let start30DateStr = this.$util.date("Y-m-d", Date.now() - 3600 * 24 * 30 * 1000)
			// this.goodsSaleWhere = `day >= "${this.start7Date}" && day <= "${endDateStr}"`

			this.loaded = true;
		},
		methods: {
			getServerData() {

			},
			complete(e) {
				console.log(e);
				//uCharts.instance[e.id]代表当前的图表实例（除APP端，APP不可在组件外调用uCharts的实例）
				console.log(uCharts.instance[e.id]);

			}
		}
	};
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		flex: 1;
	}

	.charts-box {
		width: 100%;
		height: 300px;
	}
</style>
